<section class="py-6" [ngClass]="['bg' + default, 'text' + defaultInv]">
	<div class="container flex flex-col items-center justify-center p-4 mx-auto space-y-8 sm:p-10">
		<h1 class="text-4xl font-bold leading-none text-center sm:text-5xl">Our team</h1>
		<p class="max-w-2xl text-center" [ngClass]="['text' + plainInv]">
			At a assumenda quas cum earum ut itaque commodi saepe rem aspernatur quam natus quis
			nihil quod, hic explicabo doloribus magnam neque, exercitationem eius sunt!
		</p>

		<div class="flex flex-row flex-wrap-reverse justify-center">
			<div
				*ngFor="let person of [1, 2, 3, 4, 5, 6]; let i = index"
				class="flex flex-col justify-center m-8 text-center"
			>
				<img
					class="self-center flex-shrink-0 w-24 h-24 mb-4 bg-center bg-cover rounded-full bg-gray-500"
					src="https://source.unsplash.com/100x100/?portrait?{{ i }}"
					alt=""
				/>
				<p class="text-xl font-semibold leading-tight">Leroy Jenkins</p>
				<p [ngClass]="['text' + plainInv]">Visual Designer</p>
			</div>
		</div>
	</div>
</section>
